<template>
  <div class="container">
    <div>
      <header id="header" class="mui-bar mui-bar-nav">
        <button class="mui-btn mui-btn-link mui-btn-nav mui-pull-left" @click="goBack"> <span
            class="mui-icon mui-icon-left-nav" style="color: #000000;"></span></button>
        <p class="title">确认订单</p>
      </header>
    </div>

    <div class="selectAdressBox card">
      <router-link to="../views/list" class="flex">
        <div class="autoCenter">
          <a id="icon-location"><span class="mui-icon mui-icon-location-filled"></span></a>
        </div>
        <div v-if="this.list">
          <p class="firstLine">{{this.list[this.default].name}} {{this.list[this.default].tell}}</p>
          <p class="secondLine">{{this.list[this.default].city}} {{this.list[this.default].address}}</p>
        </div>
        <p class="font1" v-else>点击添加地址信息</p>
      </router-link>
    </div>

    <div class="detailBox">
      <div class="detailHeader flex">
        <div class="img_box">
          <img class="img"
            src="https://res.vmallres.com/uomcdn/CN/sc/shop/VMALL-HUAWEIDEVICE/202203/90BC709CA0BD01DA1DDFA510535ACE6A.png" />
        </div>
        <span class="font1 salerName">华为商城自营</span>
      </div>
      <hr class="line" />
      <div class="detailBody">
        <div class="imgList flex">
          <div class="flex" v-if="!detail">
            <div class="goods_img_box" v-for="item in selectedList">
              <img class="img" :src="item.url" />
            </div>
          </div>
          <div class="goods_img_box" v-else>
            <img class="img" :src="detail.url" />
          </div>
          <span class="alignRight flex">
            <p>共</p>
            <strong v-if="!detail">{{totalSelected}}</strong>
            <strong v-else>{{this.detail.count}}</strong>
            <p>件</p>
          </span>
        </div>

        <div class="peisongBox">
          <div class="content">
            <span class="font1 alignLeft">配送</span>
            <span class="font1 alignRight">标准配送预计{{this.time}}前发货</span>
          </div>
        </div>
        <hr class="line" />
        <div class="fapiaoBox">
          <div class="content">
            <span class="font1 alignLeft">发票</span>
            <span class="font1 alignRight1">电子普通发票-个人</span>
            <span class="mui-icon mui-icon-arrowright alignRight"></span>
          </div>
        </div>
      </div>
    </div>

    <div class="privilegeBox card">
      <div class="privilege">
        <div class="content">
          <span class="font1 alignLeft">优惠券</span>
          <span class="font1 alignRight1">无可用优惠券</span>
          <span class="mui-icon mui-icon-arrowright alignRight"></span>
        </div>
      </div>
    </div>

    <div class="priceBox card">
      <div class="totalPrice">
        <div class="content">
          <span class="font1 alignLeft">商品总价</span>
          <span class="font1 alignRight1" v-if="!detail">{{totalPrice | money}}</span>
          <span class="font1 alignRight1" v-else>{{this.detail.count*this.detail.price | money}}</span>
        </div>
      </div>
      <div class="totalPrice">
        <div class="content">
          <span class="font1 alignLeft">配送费</span>
          <span class="font1 alignRight1">{{this.sendPrice | money}}</span>
        </div>
      </div>
      <div class="totalPrice">
        <div class="content">
          <span class="font1 alignLeft">商品优惠</span>
          <span class="font1 alignRight1">{{this.privilege | money}}</span>
        </div>
      </div>
    </div>

    <div class="bottom">
      <hr class="line" />
      <p class="total alignLeft">{{price | money}}</p>
      <div class="payButtonBox">
        <button type="button" class="mui-btn mui-btn-danger payButton" @click="commit">提交订单</button>
      </div>
    </div>
  </div>

  </div>
</template>

<script>
  import {
    mapState,
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        time: this.getTime(),
        sendPrice: 0,
        privilege: 0,
        detail: this.$route.params.detail
      }
    },
    created() {
      console.log(this.detail)
    },
    methods: {
      goBack() {
        this.$router.go(-1)
        this.$store.state.onHomePage = true
      },
      getTime() {
        const today = new Date();
        const yyyy = today.getFullYear();
        const mm = String(today.getMonth() + 1).padStart(2, '0');
        const dd = String(today.getDate()).padStart(2, '0');
        const formattedDate = `${yyyy}-${mm}-${dd}`;
        return formattedDate;
      },
      getPreciseTime() {
        const today = new Date();
        const yyyy = today.getFullYear();
        const mm = String(today.getMonth() + 1).padStart(2, '0');
        const dd = String(today.getDate()).padStart(2, '0');
        const hh = String(today.getHours()).padStart(2, '0');
        const mi = String(today.getMinutes()).padStart(2, '0');
        const ss = String(today.getSeconds()).padStart(2, '0');
        const formattedDateTime = `${yyyy}-${mm}-${dd} ${hh}:${mi}:${ss}`;
        return formattedDateTime;
      },
      commit() {
        var preciseTime = this.getPreciseTime()
        if (this.detail) {
          this.$store.commit('order/addOrder', {
            list: [this.detail],
            time: preciseTime,
            price: this.price
          })
        } else {
          this.$store.commit('order/addOrder', {
            list: this.selectedList,
            time: preciseTime,
            price: this.price
          })
        }

        this.del()
        this.$router.push('/user/dingdan')
        this.$store.state.onHomePage = false
      },
      del() {
        //js的数组删除只能用splice不指定数量就删完了，pop只能删最后一个
        var arr = []
        this.cart.forEach(item => {
          if (!item.selected) {
            arr.push(item)
          }
        })
        this.$store.commit('shopcart/delShopcart', arr)
      }
    },
    computed: {
      ...mapState('shopcart', ['cart']),
      ...mapState({
        default: state => parseInt(state.default),
        list: 'list'
      }),
      ...mapGetters('shopcart', {
        total: 'getTotalGoodsCount',
        totalPrice: 'getTotalPrice',
        totalSelected: 'getTotalSelected',
        selectedList: 'getSelectedList'
      }),
      price() {
        if (this.detail) {
          return this.detail.count * this.detail.price + this.sendPrice - this.privilege
        } else {
          return this.totalPrice + this.sendPrice - this.privilege
        }
      }
    },
    filters: {
      money(str) {
        return '¥' + str
      }
    }
  }
</script>

<style scoped>
  .flex {
    display: flex;
  }

  .container {
    background-color: #eee;
  }

  .title {
    font-size: 20px;
    font-weight: 420;
    margin-top: 12px;
    color: #000000;
  }

  .selectAdressBox {
    margin-top: 60px;
  }

  .card {
    background-color: white;
    border-radius: 17px;
    margin-left: 15px;
    margin-right: 15px;
    padding-top: 5px;
    padding-left: 4px;
  }

  .autoCenter {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #icon-location {
    color: red;
  }

  .selectAdressBox p {
    margin-left: 6px;
    margin-top: 5px;
  }

  .firstLine {
    color: #000000;
    font-size: 1rem;
  }


  .detailBox {
    margin-top: 15px;
    background-color: white;
    border-radius: 5%;
    margin-left: 15px;
    margin-right: 15px;

  }

  .img_box {
    width: 30px;
    height: 30px;
    margin-left: 10px;
    margin-top: 10px;
  }

  .goods_img_box {
    width: 50px;
    height: 50px;
    margin-left: 10px;
    margin-top: 7px;
  }

  .img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
  }

  .line {
    opacity: 30%;
    margin-left: 10px;
    margin-right: 10px;
  }

  .font1 {
    font-size: 0.9rem;
    color: black;
  }

  .salerName {
    margin-top: 15px;
    margin-left: 10px;
  }

  .peisongBox {
    margin-top: 20px;
  }

  .alignLeft {
    position: fixed;
    left: 5%;
  }

  .alignRight {
    position: fixed;
    right: 5%;
  }

  .alignRight1 {
    position: fixed;
    right: 10%;
  }

  .privilegeBox {
    margin-top: 15px;
  }

  .content {
    height: 40px;
    padding-top: 8px;
  }

  .mui-icon-arrowright {
    color: gray;
  }

  .priceBox {
    margin-top: 15px;
  }

  .bottom {
    width: 100%;
    height: 40px;
    position: fixed;
    bottom: 100px;
  }

  .total {
    bottom: 50px;
    color: brown;
    font-size: 1.2rem
  }

  .payButtonBox {
    position: fixed;
    right: 10px;
    bottom: 55px;
  }
</style>
